<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../node_modules/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../css/order_form.css">
    <link rel="stylesheet" href="../css/shop_cart.css">
</head>

<body>
    <div id="app">
        <mt-header fixed title="购物车">
            <mt-button slot="right" v-show="edit" @click="edit = !edit">编辑</mt-button>
            <mt-button slot="right" v-show="!edit" @click="edit=!edit">取消</mt-button>
        </mt-header>
        <div class="page_center">
            <div class="header_top" v-for="(item,index) in products_shop">
                <mt-cell :title="item.shop_name">
                    <img class="house" src="../images/house.png" slot="icon" width="16" height="16" alt="">
                </mt-cell>
                <mt-cell-swipe v-for="(item1,index) in item.goods_list" title="">
                    <div class="order_panel">
                        <div class="checkbox_group">
                            <input type="checkbox" class="truly_checkbox" v-model="item1.is_selected">
                            <span class="false_checkbox"></span>
                        </div>
                        <img :src="item1.goods_img" alt="">
                        <div class="panel_right">
                            <p>{{item1.goods_name}}</p>
                            <p>{{item1.is_valid | valid}}</p>
                            <div style="clear: both;"></div>
                            <p class="format">{{item1.goods_spec}}</p>
                            <p class="price">￥{{item1.price}}</p>
                            <p class="num">×{{item1.buy_number_int}}</p>
                        </div>
                    </div>
                </mt-cell-swipe>
            </div>
        </div>
        <div class="all_checkbox">
            <div class="checkbox_group">
                <input type="checkbox" id="checkAll" class="truly_checkbox" v-model="checkAll2" @change="checkAll">
                <span class="false_checkbox"></span>
                <label for="checkAll">全选</label>
            </div>
            <p>合计:￥{{price_all}}</p>
            <button @click="balance" v-show="edit">去结算</button>
            <button @click="remove" v-show="!edit">删除</button>
        </div>
        <!-- <mt-tabbar v-model="selected">
            <mt-tab-item id="首页">
                <img src="../images/tab_icon1.png" width="20" height="20" alt="" slot="icon"> 首页
            </mt-tab-item>
            <mt-tab-item id="服务1">
                <img src="../images/tab_icon2.png" width="20" height="20" alt="" slot="icon"> 服务
            </mt-tab-item>
            <mt-tab-item id="服务2">
                <img src="../images/tab_icon3.png" width="20" height="20" alt="" slot="icon"> 服务
            </mt-tab-item>
            <mt-tab-item id="购物车">
                <img src="../images/tab_icon4.png" width="20" height="20" alt="" slot="icon"> 购物车
            </mt-tab-item>
            <mt-tab-item id="我的">
                <img src="../images/tab_icon5.png" width="20" height="20" alt="" slot="icon"> 我的
            </mt-tab-item>
        </mt-tabbar> -->
    </div>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/mint-ui/lib/index.js"></script>
    <script src="../js/global.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            created() {
                var token = GetQueryString('token');
                $.ajax({
                    url: BaseUrl + '/index.php/Api/CartApi/getCartList',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'token': token
                    },
                    success(data) {
                        console.log(data);
                        vm.products_shop = data.data;
                        vm.products_shop.forEach(item => {
                            item['goods_list'].forEach(item => {
                                item.is_selected = 0;
                            })
                        })
                    },
                    error(err) {
                        console.log(err);
                    }
                })

            },
            data: {
                selected: '购物车',
                edit: true,
                checkAll2: false,
                products_shop: '',
            },
            computed: {
                price_all() {
                    var price_all1 = 0;
                    for (let i = 0; i < this.products_shop.length; i++) {
                        this.products_shop[i]['goods_list'].forEach(item => {
                            if (item.is_selected == '1') {
                                price_all1 += item.buy_number_int * Number(item.price);
                            }
                        })
                    }
                    return price_all1.toFixed(2);
                }
            },
            filters: {
                valid(val) {
                    if (val == '1') {
                        return '';
                    } else {
                        return '(无效商品)';
                    }
                }
            },
            methods: {
                checkAll() {
                    console.log(this.checkAll2);
                    this.products_shop.forEach(item => {
                        item.goods_list.forEach(item1 => {
                            item1.is_selected = this.checkAll2;
                        })
                    })
                },
                remove() {
                    var token = GetQueryString('token');
                    this.products_shop.forEach(item => {
                        item.goods_list.forEach(item1 => {
                            if (item1.is_selected == '1') {
                                $.ajax({
                                    url: BaseUrl + '/index.php/Api/CartApi/delCartGoods',
                                    type: 'post',
                                    dataType: 'json',
                                    data: {
                                        'token': token,
                                        'cart_id': item1.cart_id
                                    },
                                    success(data) {
                                        console.log(data);
                                        window.location.reload();
                                    },
                                    error(err) {
                                        console.log(err);
                                    }
                                })
                            }
                        })
                    })
                },
                balance() {
                    var cart_id_group = [];
                    this.products_shop.forEach(item => {
                        item.goods_list.forEach(item1 => {
                            cart_id_group.push(item1.cart_id);
                        })
                    })
                    cart_id_group = cart_id_group.join(',');
                    /* console.log(cart_id_group);
                    localStorage.setItem('cart_id', cart_id_group); */
                    window.location.href = "./order_form.html?cart_id"+cart_id_group;
                },
            }

        })
    </script>
</body>

</html>